@charset "utf-8";
@import "reset";
$fontsize:40;
@function r($px) {
    @return$px/$fontsize *1rem;
}

.web {
    width: 100%;
    height: 100%;
    position: relative;
}

header {
    width: 100%;
    height: r(97);
    font-size: r(40);
    background: black;
    position: absolute;
    top: 0;
    .header_a {
        width: r(672);
        margin: 0 auto;
    }
    .jt {
        width: r(42);
        height: r(35);
        margin-top: r(23);
        img {
            width: 100%;
        }
    }
    .ss {
        width: r(35);
        height: r(35);
        margin-top: r(23);
        img {
            width: 100%;
        }
    }
    .logo {
        width: r(66);
        height: r(77);
        margin: 0 auto;
        padding-top: r(10);
        img {
            width: 100%;
        }
    }
}

section {
    width: 100%;
    position: absolute;
    top: r(97);
    bottom: 0;
    background: black;
    overflow-y: scroll;
    .yuan {
        width: r(484);
        height: r(484);
        border-radius: 50%;
        border: r(5) solid #242424;
        margin: 0 auto;
        margin-top: r(100);
        .shu {
            width: r(141);
            height: r(177);
            margin: 0 auto;
            margin-top: r(140);
            img {
                width: 100%;
            }
        }
    }
    .zi {
        text-align: center;
        color: white;
        margin-top: r(96);
        h4 {
            display: inline-block;
            margin-left: r(44);
        }
        p {
            font-size: r(18);
            color: #444848;
            margin-top: r(24);
        }
    }
    ul {
        width: 100%;
        text-align: center;
        color: white;
        margin-top: r(160);
        margin-bottom: r(100);
        li {
            display: inline-block;
            text-align: center;
            margin-right: r(140);
            p {
                font-size: r(16);
                font-weight: 600;
            }
            h3 {
                font-size: r(46);
            }
            span {
                font-size: r(18);
                color: #656b6c;
            }
            &.active {
                color: #ecdf84;
                span {
                    color: #ecdf84;
                }
            }
        }
        li:nth-child(3) {
            margin: 0;
        }
    }
}

.circleProgress_wrapper {
    width: r(484);
    height: r(500);
    position: absolute;
    top: r(99);
    left: r(130);
}

.wrapper {
    width: r(242);
    height: r(500);
    position: absolute;
    top: 0;
    left: r(240);
    overflow: hidden;
}

.right {
    right: 0;
}

.left {
    left: 0;
}

.circleProgress {
    width: r(484);
    height: r(484);
    border: r(8) solid #f8df63;
    border-radius: 50%;
    position: absolute;
    top: 0;
    -webkit-transform: rotate(45deg);
}

.rightcircle {
    border-top: r(8) solid transparent;
    border-right: r(8) solid transparent;
    right: 0;
    -webkit-animation: circleProgressLoad_right 20s linear 1 both;
}

.leftcircle {
    border-bottom: r(8) solid transparent;
    border-left: r(8) solid transparent;
    left: 2px;
    -webkit-animation: circleProgressLoad_left 20s linear 1 both;
}

@-webkit-keyframes circleProgressLoad_right {
    0% {
        -webkit-transform: rotate(45deg);
    }
    50% {
        -webkit-transform: rotate(225deg);
    }
    100% {
        -webkit-transform: rotate(225deg);
    }
}

@-webkit-keyframes circleProgressLoad_left {
    0% {
        -webkit-transform: rotate(45deg);
    }
    50% {
        -webkit-transform: rotate(45deg);
    }
    100% {
        -webkit-transform: rotate(160deg);
    }
}

.slideout-menu {
    position: fixed;
    height: 100%;
    top: 0;
    bottom: 0;
    width: 256px;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    z-index: 0;
    display: none;
    ul {
        font-size: r(54);
        text-align: center;
        margin-bottom: r(130);
        a{
            color: black;
        }
        li {
            margin-top: r(60);
            span {
                display: inline-block;
                width: r(45);
                height: r(45);
                margin-left: r(90);
                margin-top: r(20);
                img {
                    width: 100%;
                }
            }
        }
    }
        li:nth-child(2){
            padding-left: r(140);
        }
}

.slideout-menu-left {
    left: 0;
}

.slideout-menu-right {
    right: 0;
}

.slideout-panel {
    position: relative;
    z-index: 1;
    height: 100%;
    will-change: transform;
    background-color: #FFF;
    /* A background-color is required */
}

.slideout-open,
.slideout-open body,
.slideout-open .slideout-panel {
    overflow: hidden;
}

.slideout-open .slideout-menu {
    display: block;
}

.tou {
    width: r(379);
    height: r(379);
    margin: 0 auto;
    margin-top: r(80);
    img {
        width: 100%;
    }
}

.bao {
    width: r(250);
    margin: 0 auto;
    margin-top: r(18);
    line-height: r(28);
}

.wz {
    width: r(400);
    margin: 0 auto;
    margin-top: r(64);
    padding-bottom: r(65);
    text-align: center;
    border-bottom: r(1) solid #eeeeee;
    h4 {
        font-size: r(22);
        font-weight: 600;
    }
    p {
        font-size: r(18);
        color: #777777;
        float: right;
    }
    .tp {
        width: r(20);
        height: r(17);
        display: inline-block;
        img {
            width: 100%;
        }
    }
}